<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Content - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <body>
    <div class="content-height">
      <ion-content class="ion-padding">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <hr />
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
        <p>Paragraph</p>
      </ion-content>
    </div>

    <div class="content-height">
      <ion-content class="ion-padding" color="secondary">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <hr />
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
        <p>Paragraph</p>
      </ion-content>
    </div>

    <div class="content-height">
      <ion-content class="ion-padding custom-color">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <hr />
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
        <p>Paragraph</p>
      </ion-content>
    </div>

    <div class="content-height">
      <ion-content class="ion-padding outer-content">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <hr />
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
        <p>Paragraph</p>
      </ion-content>
    </div>

    <div class="content-height">
      <ion-content class="ion-padding outer-content">
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <hr />
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
        <p>Paragraph</p>
      </ion-content>
    </div>

    <style>
      .content-height {
        height: 200px;
      }

      /* TODO should this be in content? */
      ion-content {
        height: 100%;
      }

      .outer-content {
        --background: #f2f2f2;
      }

      .custom-color {
        --background: blue;
        --color: white;
        --hr-background: purple;
      }
    </style>
  </body>
</html>
